<template>
	<view class="mian">
		<view class="login">
			<text class="t1">手机号登录</text>
		</view>
		<view class="shouji">
			<text class="t2">手机号</text>
			<input class="inp1" type="phone" v-model="phone" placeholder="请输入手机号"></input>
		</view>
		<view class="yzm">
			<text class="t3">验证码</text>
			<input class="inp2" type="password" v-model="password" placeholder="请输入密码">
			<button class="but1">获取验证码</button>
		</view>
		<button class="but2" @click="handleLogin">登录</button>
		<uni-popup ref="popup" background-color="#fff">
			<view class="main2" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<view class="weizhi">
					<view class="v1">
						<text class="t4">获取你的位置信息</text>
					</view>
					<view class="v2">
						<text class="t5">你的位置信息将用于获取你附近的站点</text>
					</view>
				</view>
				<view class="v3">
					<button class="but3">拒绝</button>
					<button class="but4" @click="agree">允许</button>
				</view>
			</view>
		</uni-popup>
	</view>
	
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	
	import {
		methods
	} from 'uview-ui/libs/mixin/mixin';
	import request from '../../untils/request';
	import baseUrl from '../../untils/urlConfig';
		
	const userInfo = ref(null);
	const phone = ref('');
	const password = ref('');
	
	const fetchUserInfo = () => {
		request({
			url: baseUrl + "/gas/users/selectUsersByPhone",
			method: "GET",
			data: {
				phone: phone.value
			},
			success: (res) => {
				console.log("用户信息:", res); 
				if (res.statusCode === 200 && res.data.code === 200) {
					const userData = res.data.data;
					// 只判断密码是否正确
					if (userData && userData.password === password.value) {
						// 登录成功，存储用户信息
						const userInfoToStore = {
							...userData,
							loginTime: new Date().getTime()
						};
						uni.setStorageSync('userInfo', userInfoToStore);
						console.log('存储的用户信息:', userInfoToStore);
						// 显示位置权限弹窗
						toggle('bottom');
					} else {
						uni.showToast({
							title: '密码错误',
							icon: 'none'
						});
					}
				} else {
					uni.showToast({
						title: '用户不存在',
						icon: 'none'
					});
				}
			},
			fail: (err) => {
				console.error("请求失败:", err);
				uni.showToast({
					title: '登录失败，请重试',
					icon: 'none'
				});
			}
		})
	}
	
	const handleLogin = () => {
	// 	if (!phone.value || !password.value) {
	// 		uni.showToast({
	// 			title: '请输入手机号和密码',
	// 			icon: 'none'
	// 		});
	// 		return;
	// 	}
	//  fetchUserInfo();
	//  uni.switchTab({
	// 	url: '/pages/index/index'
	//  });
		toggle('bottom');
	}
	
	const type = ref('center');
	const popup = ref(null);

	const toggle = (typeVal) => {
		type.value = typeVal;
		popup.value?.open(typeVal);
	};

	const agree = () => {
		uni.switchTab({
			url: '/pages/index/index'
		});
	};

	
</script>

<style>
	.mian {
		margin-top: 200rpx;
		padding: 30rpx;
		position: fixed;
	}

	.t1 {

		font-size: 60rpx;
	}

	.shouji {
		display: flex;
		padding: 40rpx;
		border-bottom: 2px solid #000;
	}

	.t2,
	.t3 {
		position: relative;
		top: 20rpx;
	}

	.inp1,
	.inp2 {
		margin-left: 50rpx;
		padding: 20rpx;
	}

	.inp2 {
		width: 228rpx;
	}

	.yzm {
		display: flex;
		padding: 40rpx;
		border-bottom: 2px solid #1D6FFF;
	}

	.but1 {
		color: #1D6FFF;
		border: 1px solid #EFEFEF;
		background-color: #E6E6E6
	}

	.but2 {
		background-color: #1D6FFF;
		width: 95%;
		margin: auto;
		position: relative;
		color: white;
		top: 140rpx;
	}

	.main2 {
/* 由于 @include 是 Sass 或 Less 中的指令，原生 CSS 不支持，这里直接使用 flex 布局的属性替代 */
        @include: flex;
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 160px;
		background-color: #fff;
	}

	.t4 {
		font-size: 35rpx;
		font-weight: 600;
	}

	.t5 {
		font-size: 30rpx;
		font-weight: 400
	}

	.v1 {
		padding: 20rpx 0 20rpx 0;
	}

	.v3 {
		display: flex;
		margin-top: 50rpx;
	}

	.but3,
	.but4 {
		width: 44%;
	}

	.but3 {
		color: #57BF6A;
		background-color: #EFEFEF
	}

	.but4 {
		background-color: #57BF6A;
		color: white;
	}

	.popup-height {
		@include height;
		width: 200px;
	}
</style>